import React, { Component } from 'react';
import {
  Row,
  Col,
  Card,
  List,
  Avatar,
  Button,
  Form,
  Popconfirm,
  Divider,
  Input,
  Modal,
  Slider,
  InputNumber,
  Collapse,
  Icon,
  message,
  Select,
  Radio,
} from 'antd';
import Link from 'umi/link';
import { formatMessage } from 'umi/locale';
import { connect } from 'dva';
import OrderForm from './hdForms/OrderForm';
import ThicknessMaxForm from './hdForms/ThicknessMaxForm';
import FlagDataForm from './hdForms/FlagDataForm';
import { Stage, Layer, Text, Image, Line, Label, Tag, Rect } from 'react-konva';

@connect(({ produce }) => ({ produce }))
class BoardImageShow extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    image: null,
  };
  componentDidMount() {
    this._isMounted = true;
    const image = new window.Image();
    image.src = this.props.produce.boardImageSrc;
    image.onload = () => {
      if (this._isMounted) {
        this.setState({
          image: image,
        });
      }
    };
  }

  componentWillUpdate() {
    const image = new window.Image();
    image.src = this.props.produce.boardImageSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    };
  }

  render() {
    return (
      <Image
        image={this.state.image}
        width={this.state.image ? this.state.image.width : 500}
        height={this.state.image ? this.state.image.height : 500}
      />
    );
  }
}

@connect(({ produce, hd, os, ds }) => ({ produce, hd, os, ds }))
@Form.create()
class Produce extends Component {
  state = {
    search_orderId: '',
    flatBoardMax: 0,
    btnClickFlag: true,
    thicknessSetVal: 0,
    chooseToWhereModalVislbe: false,
    radioValue: 1, // 默认是选择收料平台1.
  };

  // 小车作业去向切换
  onRadioChage = e => {
    this.setState({
      radioValue: e.target.value,
    });
  };

  // 关闭设备启动提示框
  closeProduceStartModal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/closeProduceStartModal',
    });
  };

  closeAlarmModal = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/closeTipsModal',
    });
  };
  clear_grate_alarm = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/clearGrateAlarm',
    });
  };

  // 点击历史数据的时候
  clickHistory = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'os/clickHistory',
    });
  };

  // 点击了复位按钮
  clickDeviceReset = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/clickDeviceReset',
    });
  };

  clickAlarmReset = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/clickAlarmReset',
    });
  };

  onChange = (key, e) => {
    console.log(key, e.props.children);
    this.setState({
      search_orderId: e.props.children,
    });
  };

  // 选择小车的作业去向
  chooseToWhere = e => {
    const { dispatch } = this.props;
    this.setState({
      chooseToWhereModalVislbe: true,
    });
  };

  clickStartProduce = e => {
    const { dispatch } = this.props;
    const { btnStartClicked } = this.props.produce;
    const { workingOrder } = this.props.os;
    const { radioValue } = this.state;

    if (btnStartClicked) {
      // 按钮已经点击过了,就什么也不做.
    } else {
      // 如果是第一次点击,就执行自动作业的流程
      dispatch({
        type: 'produce/updateStartProduceBtn',
        payload: true,
      });
      dispatch({
        type: 'produce/clickStartProduce',
        payload: [workingOrder[0], radioValue],
      });
    }
  };

  // 点击搜索
  clickSearch = e => {
    console.log('search');
    const { dispatch } = this.props;
    const { search_orderId } = this.state;
    dispatch({
      type: 'os/searchOrder',
      payload: search_orderId,
    });
  };

  // 点击搜索之后的返回
  clickBack = e => {
    console.log('back');
    const { dispatch } = this.props;
    dispatch({
      type: 'hd/getServerOrder',
    });
  };

  clickReset = e => {
    console.log('reset');
    const { dispatch } = this.props;
    const { btnResetAllClicked } = this.props.produce;
    dispatch({
      type: 'produce/updateResetAllBtnClick',
      payload: true,
    });
    if (btnResetAllClicked) {
      // 如果按钮被按下就什么都不做
    } else {
      dispatch({
        type: 'produce/clickResetAll',
      });
    }
  };
  ExcepReset = e => {
    console.log('Excep');
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/ExcepReset',
    });
  };
  clickExcepReset = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/clickExcepReset',
    });
  };
  clickStopProduce = e => {
    console.log('stop');
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/updateBoardImageModalState',
      payload: [false, null, '无提示消息,作业未开始!'],
    });
    dispatch({
      type: 'produce/clickStopProduce',
    });
  };

  closeModal = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'hd/closeModal',
    });
  };
  handleQuit = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'hd/stop_auto',
    });
    this.closeModal();
    dispatch({
      type: 'produce/stop',
    });
  };
  // 界面上点击了自动作业弹出来的小车作业去向
  clickChooseToWhere = e => {
    this.setState({
      chooseToWhereModalVislbe: false,
    });
    this.clickStartProduce(); // 调用自动作业的逻辑.
  };

  // 切换放板位置
  changePutBoardPos = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/changePutBoardPos',
    });
  };

  jackingUpStateLV01 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/jackingUpStateLV01',
    });
  };
  clearLv1FullQuit = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/clearLv1FullQuit',
    });
  };

  jackingUpStateLV02 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/jackingUpStateLV02',
    });
  };
  clearLv2FullQuit = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/clearLv2FullQuit',
    });
  };
  clearPinFlag = e => {
    const { dispatch } = this.props;
    const { pinFlag } = this.props.ds;
    dispatch({
      type: 'produce/clearPinFlag',
      payload: pinFlag,
    });
  };
  closeRaster = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/closeRaster',
    });
  };
  openRaster = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/openRaster',
    });
  };
  setAGVOrArtificial = e => {
    const { dispatch } = this.props;
    const { BMSR } = this.props.ds;
    dispatch({
      type: 'produce/setAGVOrArtificial',
      payload: BMSR,
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const {
      autoEnable,
      runStateCam,
      errorMsg,
      rsStateCam,
      carType,
      errorInfo, // 控制器和相机拍摄异常的提示信息
      errorInfoModalVisble, // 底层的弹窗是否显示
      produceStartModalVisible, // 设备启动提示框
      produceStartModalInfo, // 设置提示框的内容
      boardImageVisible, // 识别的提示的图
      boardImageSrc, // 识别异的图片
      boardImageInfo, // 识别提示信息
      resetModalVisible, // 复位提示框
      resetModalInfo, // 复位提示信息
      btnResetAllClicked, // 复位按钮被按下
      flagDataParams,
    } = this.props.produce;
    const { btnName, btnClickFlag, chooseToWhereModalVislbe, radioValue } = this.state;

    const {
      plcStates, // Plc状态
      mainAlarmInfo, // 主控制器报警状态
      mainAlarmInfoVisible, // 主控制报警状态是否显示
      cameraGroupStates, // 相机组状态
      autoState, // 是否是自动作业状态
    } = this.props.ds;

    const { totalOrders, workingOrder } = this.props.os; // 工单数据
    const gridStyle = {
      width: '40%',
      textAlign: 'left',
    };
    const gridStyle2 = {
      width: '40%',
      textAlign: 'left',
    };
    const gridStyle3 = {
      width: '60%',
      textAlign: 'left',
    };

    const { Option } = Select;
    const children = [];
    for (let i = 0; i < totalOrders.length; i++) {
      children.push(<Option key={i.toString() + i}>{totalOrders[i]['cutId']}</Option>);
    }
    return (
      <>
        <Card>
          <Card.Grid style={{ width: '50%', textAlign: 'left' }}>
            <span>
              <font style={{ color: '#0000FF', fontSize: 19 }}>Plc状态</font>
            </span>
            <span style={{ marginLeft: 20 }}>
              连接:&nbsp;&nbsp;&nbsp;
              {plcStates.online ? (
                <font style={{ color: '#00FF00', fontSize: 16 }}>已连接</font>
              ) : (
                <font style={{ color: '#FF0000', fontSize: 16 }}>已断开</font>
              )}{' '}
            </span>
            <span style={{ marginLeft: 10 }}>状态:&nbsp;&nbsp;&nbsp; </span>
            <span style={{ color: '#00FF00', fontSize: 16 }}>{plcStates.run}</span>
            <span style={{ marginLeft: 30 }}>
              相机:&nbsp;&nbsp;&nbsp;
              {cameraGroupStates[0] ? (
                <font style={{ color: '#00FF00', fontSize: 16 }}>已连接</font>
              ) : (
                <font style={{ color: '#FF0000', fontSize: 16 }}>已断开</font>
              )}
            </span>
          </Card.Grid>
        </Card>
        <Card>
          <Card.Grid style={{ width: '70%', textAlign: 'left' }}>
            <div style={{ textAlign: 'left', marginBottom: 10 }}>
              <span style={{ marginLeft: 5 }}>搜索的产品Id</span>
              <InputNumber
                onChange={value => this.setState({ searchId: value })}
                style={{ marginLeft: 10, width: 150 }}
              />
              <Button onClick={this.clickSearch} style={{ marginLeft: 10, marginRight: 10 }}>
                搜索
              </Button>
              {/* <Button onClick={this.clickHistory}>历史记录</Button> */}
              <Button style={{ marginLeft: 30, marginRight: 10 }} onClick={this.clickDeviceReset}>
                总复位
              </Button>
              <Button style={{ marginLeft: 30, marginRight: 10 }} onClick={this.clickAlarmReset}>
                故障报警复位
              </Button>
            </div>
            {/* <OrderForm order={workingOrder} /> */}
            <FlagDataForm flagDataParams={flagDataParams} />
          </Card.Grid>
        </Card>
      </>
    );
  }
}
export default Produce;
